<template>
    <div class="content">
        <v-chart :option="chartOption" autoresize></v-chart>
    </div>
</template>
<script>
import { getShow } from "@/api/organ/business";
export default {
  components: {},
  data() {
    return {
      chartOption: {
        color: ["#1E6FFF", "#FFA901", "#01D1FF", "#3CD495"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          //   orient: "vertical",
          x: "right", //可设定图例在左、右、居中
          y: "top", //可设定图例在上、下、居中
          padding: [10, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          itemWidth: 16, // 宽
          itemHeight: 16, // 高
          data: ["鱼虾类", "畜肉", "禽肉", "蔬菜"],
        },
        calculable: true,
        grid: {
          top: "12%",
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: ['2023-02-26','2023-03-26','2023-04-26','2023-05-26'],
            axisTick: {
              // 轴刻度
              show: true,
            },
            axisLine: {
              // 轴线
              show: true,
              color: "#E6E6E6",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位: 元",
            nameTextStyle: {
              padding: [1, 0, 30, 20],
            },
          },
        ],
        series: [
          {
            name: "鱼虾类",
            type: "bar",
            data: ["500", "20", "320", "320"],
            barWidth: 36,           //柱图宽度
            barGap: "50%",       // 柱图间距离
            stack:"Search Engine",
            itemStyle: {
              normal: {
                label: {
                  show: true,       //开启显示数值
                  position: "inside",  //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#FFFFFF", //字体颜色
                    fontSize: 10,     //字体大小
                  },
                },
              },
            },
          },
          {
            name: "畜肉",
            type: "bar",
            data: ["10", "20", "600", "320"],
            barWidth: 36, //柱图宽度
            stack:"Search Engine",
            itemStyle: {
              normal: {
                label: {
                  show: true,       //开启显示数值
                  position: "inside",  //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#FFFFFF", //字体颜色
                    fontSize: 10,     //字体大小
                  },
                },
              },
            },
          },
          {
            name: "禽肉",
            type: "bar",
            data: [],
            barWidth: 36, //柱图宽度
            stack:"Search Engine",
            itemStyle: {
              normal: {
                label: {
                  show: true,       //开启显示数值
                  position: "inside",  //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#FFFFFF", //字体颜色
                    fontSize: 10,     //字体大小
                  },
                },
              },
            },
          },
          {
            name: "蔬菜",
            type: "bar",
            data: [],
            barWidth: 36, //柱图宽度
            stack:"Search Engine",
            itemStyle: {
              normal: {
                label: {
                  show: true,       //开启显示数值
                  position: "inside",  //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#FFFFFF", //字体颜色
                    fontSize: 10,     //字体大小
                  },
                },
              },
            },
          },
        ],
      },
    };
  },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  mounted() { 
    this.getShowApi();
  },
  methods: { 
    getShowApi() {
      this.chartOption.legend.data = [];
      return new Promise((resolve) => {
        getShow({
          publishId: this.id,
          type: 2,
        }).then((res) => {
          if (res.code === 1) {
            res.data.dataList.forEach((element) => {
              this.chartOption.legend.data.push(element.key);
            });
            this.chartOption.xAxis[0].data = res.data.date;
            this.chartOption.series[0].name = res.data.dataList[0].key;
            this.chartOption.series[1].name = res.data.dataList[1].key;
            this.chartOption.series[2].name = res.data.dataList[2].key;
            this.chartOption.series[3].name = res.data.dataList[3].key;
            this.chartOption.series[0].data = res.data.dataList[0].value;
            this.chartOption.series[1].data = res.data.dataList[1].value;
            this.chartOption.series[2].data = res.data.dataList[2].value;
            this.chartOption.series[3].data = res.data.dataList[3].value;
            this.$emit("titleDate", res.data.titleDate);
            console.log("--------------------", res.data);
            resolve();
          }
        });
      });
    },
  }
};
</script>
<style lang="less" scoped>
.content {
    height:100%;
    width:100%;
}
</style>